<template>
    <div>
      <template>
    <div>
      <vxe-table
        :align="allAlign='center'"
        :data="tableData"
        border
        :cell-class-name="tableCell"
        >
        <vxe-column type="seq" width="60"></vxe-column>
        <vxe-column field="name" title="Name"></vxe-column>
        <vxe-column field="sex" title="Sex"></vxe-column>
        <vxe-column field="age" title="Age"></vxe-column>
      </vxe-table>


      <div class="name">
         <span class="span1">
             基本报表是什么<span class="span2">30</span>分
         </span>
      </div>



      
    </div>
  </template>
  <div class="about">
		<div class="listPage">
			<ul>
				<li v-for="(item,key) of list" :key=item.id>
					<input type="checkbox" v-model="item.isShow" />
					<span>{{item.name}}</span>
					<span class="content">{{item.wisdom}}</span>
					<button @click="delOncePage(key)">删除</button>
				</li>
			</ul>
		</div>
	</div>
    </div>
  </template>
  <script>
  export default {
    data () {
      return {
        allAlign: null,
        tableData: [
          { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
          { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
          { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
          { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
        ],
        list: JSON.parse(localStorage.getItem("list")) || [{
						id: "1",
						name: "千与千寻",
						wisdom: "人生就是一列开往坟墓的列车",
						isShow: true
					},
					{
						id: "2",
						name: "你的名字",
						wisdom: "你会哭着笑,笑着哭,是因为你的心,早已超越了自己",
						isShow: true
					},
					{
						id: "3",
						name: "言叶之庭",
						wisdom: "人生就是一列开往坟墓的列车",
						isShow: true
					},
					{
						id: "4",
						name: "千与千寻",
						wisdom: "晴朗的早晨,我会按部就班",
						isShow: true
					},
					{
						id: "5",
						name: "千与千寻",
						wisdom: "相比于蓝天,我更想选择阳菜",
						isShow: true
					}
				]
			}
    },
    watch: {
			list: {
				deep: true,
				handler(news, olds) {
					localStorage.setItem("list", JSON.stringify(news))
				}
			}
		},
    methods:{
      tableCell({row,columnIndex}){//对应此属性找到具体你要添加的对应单元格
          if(row.age == 28 && columnIndex == 3){//类似这种形式
              return "class-style"//然后给这个样式一个class名
          }
      },
      delOncePage(key) {
				this.list.splice(key, 1)
			},
    }
    
  }
  </script>
  
  <style scoped>
  /* //然后给对应的单元格样式 */
  >>>.vxe-table .vxe-body--row .vxe-body--column.class-style .vxe-cell span{
      color: red;
      font-size:30px;
      writing-mode: vertical-lr; 
      text-orientation: upright;
      text-align:center;
      font-size:18px;
      font-weight:900;
  }
  .name{
    
  }
  .span1{
      writing-mode: vertical-lr; 
      text-orientation: upright;
      text-align:center;
      font-size:18px;
      font-weight:900;
  }
  .span2{
    display: inline-block;
    width: 20px;
    height: 25px;
    writing-mode: horizontal-tb;
    /* text-align: center; */
  }
  * {
		margin: 0 auto;
		padding: 0;
		list-style: none;
	}
 
	.listPage {
		width: 600px;
	}
 
	.listPage li {
		width: 100%;
		background-color: antiquewhite;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
 
	.listPage li .content {
		width: 60%;
		height: 50px;
		line-height: 50px;
		text-align: left;
	}
	.listPage li input[type=checkbox]{
		zoom: 2;
	}
  </style>